{extend name="public/pure"/}
{block name="style"}
<style>
    .header-nav{
        text-align: center;
        line-height: 50px;
        font-size: 16px;
        cursor: pointer;
    }
    .layui-table-cell {
        height: auto !important;
        line-height: unset !important;
        white-space: normal;
    }

    .layui-badge {
        height: auto;
    }
</style>
{/block}
{block name="content"}
    <div class="layui-row">
        <div class="layui-col-sm3">
            <div class="header-nav"><i class="layui-icon layui-icon-cart-simple"></i><span>平台：<span>{$order->platform_name}</span></div>
        </div>
        <div class="layui-col-sm3">
            <div class="header-nav"><i class="layui-icon layui-icon-rate-solid"></i><span>店铺：<span>{$order->account->store_name}</div>
        </div>
        <div class="layui-col-sm3">
            <div class="header-nav"><i class="layui-icon layui-icon-share"></i><span>单号：<span class="copy-text">{$order->order_no}</div>
        </div>

        <div class="layui-col-sm3">
            <div class="header-nav"><i class="layui-icon layui-icon-dollar"></i><span>金额：<span>{$order->total_price}&nbsp;{$order->currency}</div>
        </div>
    </div>
    <div class="layui-row" style="margin-bottom: 40px; margin-top: 15px;">
        <div class="layui-progress layui-progress-big" lay-showpercent="true">
            <div class="layui-progress-bar" lay-percent="{$process}%"></div>
        </div>
    </div>
    <div class="layui-row">
        <form class="layui-form">
            <div class="layui-tab" lay-filter="address">
                <ul class="layui-tab-title">
                    <li class="layui-this">收货地址</li>
                    <li>备注信息</li>
                </ul>
                <div class="layui-tab-content edit-order-data">
                    <div class="layui-tab-item layui-show">
                        <div class="layui-form-item">
                            <div class="layui-col-xs4">
                                <label class="layui-form-label">收件人</label>
                                <div class="layui-input-block">
                                    <input type="text" disabled value="{$order->consignee}"name="consignee" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-col-xs4">
                                <label class="layui-form-label">买家名</label>
                                <div class="layui-input-block">
                                    <input type="text" disabled value="{$order->buyer_first_name}" name="buyer_first_name" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-col-xs4">
                                <label class="layui-form-label">买家姓</label>
                                <div class="layui-input-block">
                                    <input type="text" disabled value="{$order->buyer_last_name}" name="buyer_last_name" class="layui-input">
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-col-xs4">
                                <label class="layui-form-label">买家账号</label>
                                <div class="layui-input-block">
                                    <input type="text" disabled value="{$order->buyer_account}" name="buyer_account" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-col-xs4">
                                <label class="layui-form-label">邮箱</label>
                                <div class="layui-input-block">
                                    <input type="text" disabled value="{$order->buyer_email}" name="buyer_email" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-col-xs4">
                                <label class="layui-form-label">公司</label>
                                <div class="layui-input-block">
                                    <input type="text" disabled value="{$order->buyer_company}" name="buyer_company" class="layui-input">
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-col-xs4">
                                <label class="layui-form-label">电话</label>
                                <div class="layui-input-block">
                                    <input type="text" disabled value="{$order->buyer_phone}" name="buyer_phone" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-col-xs4">
                                <label class="layui-form-label">手机</label>
                                <div class="layui-input-block">
                                    <input type="text" disabled value="{$order->buyer_mobile}" name="buyer_mobile" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-col-xs4">
                                <label class="layui-form-label">国家</label>
                                <div class="layui-input-block">
                                    <select name="buyer_country_code" lay-search disabled>
                                        {foreach name="country" id="c"}
                                            <option {if $c.code_two == $order.buyer_country_code}selected{/if} value="{$c.code_two}">{$c.name_ch}</option>
                                        {/foreach}
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-col-xs4">
                                <label class="layui-form-label">省/州</label>
                                <div class="layui-input-block">
                                    <input type="text" disabled value="{$order->buyer_province}" name="buyer_province" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-col-xs4">
                                <label class="layui-form-label">城市</label>
                                <div class="layui-input-block">
                                    <input type="text" disabled value="{$order->buyer_city}" name="buyer_city" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-col-xs4">
                                <label class="layui-form-label">区域</label>
                                <div class="layui-input-block">
                                    <input type="text" disabled value="{$order->buyer_district}" name="buyer_district" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-col-xs4">
                                <label class="layui-form-label">邮编</label>
                                <div class="layui-input-block">
                                    <input type="text" disabled value="{$order->buyer_post_code}" name="buyer_post_code" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-col-xs4">
                                <label class="layui-form-label">地址1</label>
                                <div class="layui-input-block">
                                    <input type="text" disabled value="{$order->buyer_address_1}" name="buyer_address_1" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-col-xs4">
                                <label class="layui-form-label">地址2</label>
                                <div class="layui-input-block">
                                    <input type="text" disabled value="{$order->buyer_address_2}" name="buyer_address_2" class="layui-input">
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-col-xs4">
                                <label class="layui-form-label">地址3</label>
                                <div class="layui-input-block">
                                    <input type="text" disabled value="{$order->buyer_address_3}" name="buyer_address_3" class="layui-input">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-tab-item" style="min-height: 280px;">
                        <div class="layui-col-xs12">
                            <div style="margin-bottom: 15px;"><span>平台备注：</span>{$order->platform_remark}</div>
                            <p>备注：</p>
                            <textarea name="remark" disabled placeholder="请输入内容" class="layui-textarea">{$order->remark}</textarea>
                        </div>
                    </div>
                    <div class="layui-hide" id="order-data">{:json_encode($order->detail)}</div>
                    <input type="hidden" name="order_id" value='{$order->order_id}'/>
                    <input type="hidden" id="detail-input-id"/>
                    <button type="button" id="upload-img" class="layui-hide">上传文件</button>
                </div>
            </div>
        </form>
        <div class="layui-col-xs11">
            <div style="text-align: right">
                <button type="button" class="layui-btn layui-btn-sm layui-btn-normal edit-data">编辑</button>
                <button type="button" class="layui-btn layui-btn-sm layui-btn-normal save-data">保存</button>
            </div>
        </div>
    </div>
    <div>
        <table class="layui-hide" id="order-info" lay-filter="order-info"></table>
    </div>
    <script type="text/html" id="operation">
        <button type="button" lay-event="image" class="layui-btn layui-btn-sm layui-btn-normal">替换图片</button>
    </script>
{/block}
{block name="script"}
<script type="text/javascript">
    //一般直接写在一个js文件中
    layui.use(['layer', 'form', 'element', 'table', 'upload'], function () {
        var layer = layui.layer
            , $ = layui.jquery
            , form = layui.form
            , table = layui.table
            , upload = layui.upload;

        upload.render({
            elem: '#upload-img'
            , url: '{:url("file/upload",["type"=>"image"])}'
            , accept: 'images' //普通文件
            , exts: 'jpg|jpeg|png' // 指定类型
            , field: "file"
            , before: function (obj) {
                layer.load(0, {shade: false});
            }
            , done: function (response, index, upload) {
                var whoId = $("#detail-input-id").val();$("#detail-input-id").val('');
                layer.closeAll('loading');
                var icon = 5;
                if(response.code == 1)
                {
                    icon = 6;
                    $("#img-" + whoId).attr("src", response.data.src);
                    for(let i in table.cache["order-info"])
                    {
                        if(table.cache["order-info"][i].detail_id == whoId)
                        {
                            table.cache["order-info"][i].image_url = response.data.src;
                            break;
                        }
                    }
                }
                layer.msg(response.msg, {icon: icon, time: 1500});
            }
            , error: function (index, upload) {
                layer.msg('上传失败');
            }
        });
        $(".edit-data").click(function()
        {
            $(".edit-order-data input, .edit-order-data select, .edit-order-data textarea").removeAttr("disabled").eq(0).focus();
            form.render('select');
        });

        $(".save-data").click(function()
        {
            var postJson = {}, orderData = $("form").serializeArray();
            for(let i in orderData)
            {
                postJson[orderData[i].name] = $.trim(orderData[i].value);
            }
            postJson.order_detail = table.cache["order-info"];
            $(".edit-order-data input[type=text], .edit-order-data select, .edit-order-data textarea").attr("disabled", true);
            form.render('select');
            $.ajax({
                type: "post",
                url: "{:url('order/manager/look')}",
                dataType : "json",
                data: JSON.stringify(postJson),
                success: function(response)
                {
                    parent.layui.table.reload("commodity");
                    layer.msg(response.msg, {icon: response.code == 1 ? 6 : 5, time: 1500});
                    setTimeout(()=>{
                        parent.layer.closeAll();
                    }, 2000);
                }
            });
        });

        //监听单元格编辑
        /*table.on('edit(order-info)', function (obj) {
            var value = obj.value //得到修改后的值
                , data = obj.data //得到所在行所有键值
                , field = obj.field; //得到字段
            var params = {field, value};
            params["order_id"] = data.order_id;
            $.post("{:url('/order/manager/save')}", params).done(function(response)
            {
                var icon = response.code == 1 ? 6 : 5;
                layer.msg(response.msg, {icon: icon, time: 1500});
            });
        });*/
        // 表格操作事件
        table.on('tool(order-info)', function (obj) {
            var data = obj.data;
            if(obj.event === 'image')
            {
                $("#detail-input-id").val(data.detail_id);
                $("#upload-img").click();
            }
        });
        table.render({
            elem: '#order-info'
            ,title: '用户数据表'
            , totalRow: true
            , even: true
            ,cols: [[
                {field:'image_url', title:'图片', width:150, totalRowText: '合计', templet : function(row)
                    {
                        return `<a ${row.url ? 'target="_blank"' : ''} href="${row.url ? row.url : 'javascript:void(0)'}"><img id="img-${row.detail_id}" width="100px" src="${row.image_url}"/></a>`;
                    }}
                ,{field:'sku', title:'SKU', width:180, templet : function(row)
                    {
                      return `<span class="copy-text">${row.sku}</span>`;
                    }
                }
                ,{field:'qty', width:60, title:'数量', totalRow: true}
                ,{field:'price', width:130, title:'单价', totalRow: true}
                ,{field:'declare_ch', title:'申报中文名', edit: 'text'}
                ,{field:'declare_en', title:'申报英文名', edit: 'text'}
                ,{field:'declare_price', title:'申报价格', edit: 'text'}
                ,{field:'url', title:'线上链接', edit: 'text'}
                ,{field:'remark', title:'备注', edit: 'text'}
                ,{title: '操作', fixed: "right", toolbar: '#operation'}
            ]]
            ,data: JSON.parse($("#order-data").text())
        });
    });
</script>
{/block}